<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" name="viewport">
		<title>抢红包</title>
		<link rel="stylesheet" type="text/css" href="../css/footer.css"/>
		<style type="text/css">
			a {
				text-decoration: none;
			}
			#swrapper {
				height: 96vh;
				/*background: url(../images/homePage/two_bg.png);*/
				background: url(../images/homePage/BJ.png);
				background-size:100% 100% ;
				position: relative;
				border-top: 1px solid #5c169a;
			}
			.title {
				background: #e0303b;
				text-align: center;
				width: 80%;
				margin: 0 auto;
				color: white;
				border-radius: .3rem;
				height: 1.5rem;
				line-height: 1.5rem;
				font-size: .7rem;
				margin-top: 35vh;
			}
			.container {
				width: 80%;
				margin: 0 auto;
				font-size: 0;
				display: flex;
				display: -webkit-flex;
				justify-content: space-between;
				flex-wrap: wrap;
				margin-top: 1rem;
			}
			.container > div {
				position: relative;
				display: inline-block;
				width: 19%;
				background: url(../images/homePage/chai_bg.png);
				background-size:100% 100% ;
				height: 4rem;
				margin-top: .3rem;
			}
			.container .bg {
				position: absolute;
				width: 1.5rem;
				left: .65rem;
				top: .5rem;
				animation: myfirst infinite 2s;
			}
			.container .text {
				position: absolute;
				font-size: .7rem;
				color: burlywood;
				width: 100%;
				text-align: center;
				bottom: 15%;
			}
			@keyframes myfirst {
				from {
					transform:rotateY(10deg);
				}
				to {
					transform:rotateY(350deg);
				}
			}
			
			#mask {
				display: none;
				position: absolute;
				top: 0;
				left: 0;
				background: rgba(0,0,0,.5);	
				width: 100%;
				height: 96vh;
			}
			#prompt {
				position: relative;
				width: 90%;
				margin: 0 auto;
				top: 26vh;
				/*left: 5%;*/
				background: white;
				padding: 1.5rem 0;
				text-align: center;
				border-radius: .5rem;
			}
			#prompt .text_title {
				color: #9f9f9f;
				font-size: .9rem;
			}
			#prompt .text_content {
				font-size: .7rem;
				margin: 1rem 0;
			}
			#prompt > a {
				background: limegreen;
				color: white;
				font-size: .7rem;
				padding: .5rem 2rem;
				border-radius: .3rem;
			}
		</style>
	</head>
	<body>
		<div id="swrapper">
			<div class="title">可抢到红包</div>
			<div class="container">
				<div>
					<img class="bg" src="../images/homePage/kai.png" alt="" />
					<span class="text">拆红包</span>
				</div>
				<div>
					<img class="bg" src="../images/homePage/kai.png" alt="" />
					<span class="text">拆红包</span>
				</div>
				<div>
					<img class="bg" src="../images/homePage/kai.png" alt="" />
					<span class="text">拆红包</span>
				</div>
				<div>
					<img class="bg" src="../images/homePage/kai.png" alt="" />
					<span class="text">拆红包</span>
				</div>
				<div>
					<img class="bg" src="../images/homePage/kai.png" alt="" />
					<span class="text">拆红包</span>
				</div>
				<div>
					<img class="bg" src="../images/homePage/kai.png" alt="" />
					<span class="text">拆红包</span>
				</div>
				<div>
					<img class="bg" src="../images/homePage/kai.png" alt="" />
					<span class="text">拆红包</span>
				</div>
				<div>
					<img class="bg" src="../images/homePage/kai.png" alt="" />
					<span class="text">拆红包</span>
				</div>
				<div>
					<img class="bg" src="../images/homePage/kai.png" alt="" />
					<span class="text">拆红包</span>
				</div>
				<div>
					<img class="bg" src="../images/homePage/kai.png" alt="" />
					<span class="text">拆红包</span>
				</div>
				<div>
					<img class="bg" src="../images/homePage/kai.png" alt="" />
					<span class="text">拆红包</span>
				</div>
				<div>
					<img class="bg" src="../images/homePage/kai.png" alt="" />
					<span class="text">拆红包</span>
				</div>
				<div>
					<img class="bg" src="../images/homePage/kai.png" alt="" />
					<span class="text">拆红包</span>
				</div>
				<div>
					<img class="bg" src="../images/homePage/kai.png" alt="" />
					<span class="text">拆红包</span>
				</div>
				<div>
					<img class="bg" src="../images/homePage/kai.png" alt="" />
					<span class="text">拆红包</span>
				</div>
			</div>
		</div>
		<footer>
			<ul id="footer">
				<li>
					<a href="../index.html">抢红包</a>
				</li>
				<li>
					<a href="agency.html">代理</a>
				</li>
				<li>
					<a href="server.html">客服</a>
				</li>
				<li>
					<a href="center.html">我的</a>
				</li>
			</ul>
		</footer>
		<!--提示框-->
		<div id="mask">
			<div id="prompt">
				<p class="text_title">提示</p>
				<p class="text_content">恭喜您获得1.2元！</p>
				<a href="../index.html">确定</a>
			</div>
		</div>
	</body>
	<script src="../js/jquery-3.2.1.min.js"></script>
	<script type="text/javascript">
		!(function(doc, win) {
			var docEle = doc.documentElement,
				evt = "onorientationchange" in window ? "orientationchange" : "resize",
				fn = function() {
					var width = docEle.clientWidth;
					width && (docEle.style.fontSize = 20 * (width / 375) + "px");
				};
			win.addEventListener(evt, fn, false);
			doc.addEventListener("DOMContentLoaded", fn, false);
		}(document, window));
		
		// 拆红包
		$('.container>div').click(function () {
			$(this).css('opacity','0')
			$('#mask').fadeIn();
			for (var i = 0; i < $('.container .text').length; i++) {
				$('.container div:eq('+i+ ') .text').html('888');
			}
		})
	</script>
</html>
